<template>
    <div class="entrance-container">
        <div class="particleGround"></div>
        <!--<loading v-if="$store.getters.getLoading"></loading>-->
        <!--重新渲染组件只能使用v-if,不能用v-show-->
        <!--resize 当内容大小改变时会重置scrollBar-->
        <happy-scroll v-if="flag" color="rgba(51,51,51,0.2)" size="10" hide-horizontal>
            <div class="box" :style="{ height:clientHeight + 'px' }">
                <!--<div class="title">-->
                    <!--<p>Duckling</p>-->
                <!--</div>-->
                <div class="content">
                    <div class="sign">
                        <!--:class="{'router-link-active': $route.path === '/entrance' || $route.path === '/entrance/'}"-->
                        <router-link to="/entrance/sign_in">登录</router-link>
                        <span>·</span>
                        <router-link to="/entrance/sign_up">注册</router-link>
                    </div>
                    <router-view v-if="reloadFlag"></router-view>
                </div>
            </div>
        </happy-scroll>
    </div>
</template>

<script>
//    var common = require('@/common')
    import common from '@/assets/js/common'
    import { ParticleGround } from '@/assets/lib/particleground/particleground'
//    import loading from '@/components/tool/loading.vue'
    export default{
        //data属性和methods方法加载完毕
        created(){
            //切记要解绑,解绑的时候第二个参数即为当初绑定事件时的函数,所以需要用
            // 一个变量存放起来,以便解绑的时候可以用到
            this.throttle = common.throttle(() => {
                this.clientHeight = common.client().height
                this.flag = false
                //在下一个DOM更新周期之后推迟要执行的再执行。在您更改了一些数据以等待DOM更新后立即使用它。
                this.$nextTick(() => {
                    this.flag = true
                })
            },300)
            window.addEventListener('resize',this.throttle)
        },
        mounted(){
//            var operator = ParticleGround(document.querySelector('.particleGround'),{
//                dotColor: '#fff',   //设置粒子的颜色
//                lineColor: '#fff',  //设置线的颜色
//                dotOpacity: 0.2,    //设置粒子的透明度
//                lineOpacity: 0.2,   //设置线的透明度
//                minSpeedX: 0.4,     //设置x轴方向的最小移动速度
//                maxSpeedX: 1,       //设置x轴方向的最大移动速度
//                minSpeedY:0.4,      //设置y轴方向的最小移动速度
//                maxSpeedY:1,        //设置y轴方向的最大移动速度
//                parallax: false,    //指定粒子是否跟随鼠标
//                directionX: "center",   //指定粒子x轴的走向
//                directionY: "center",   //指定粒子y轴的走向
//                dotMinSize: 3,      //如果想让粒子大小相同,只需dotMinSize和dotMaxSize相同即可
//                dotMaxSize: 20,
//                lineWidth:1,         //设置线的宽度
//                curvedLines:false,  //设置线是否弯曲,前提是parallax为true
//                density:35000,       //设置粒子密度,值越大,密度越小
//                clickAddDot:false,   //设置是否添加点击画布添加粒子事件
//                addDotNumber:2,     //设置每次点击添加的粒子个数
//                dotShape:"heart",      //设置粒子的形状  可选址:circle edge(正方形) triangle(三角形) polygon(多边形) star
//                sideNumber:5,        //对polygon,star才有效
//                proximity:100        //在指定的范围内,粒子之间产生会产生连线
//            })
//            this.$store.commit('setParticleGround',operator)
        },
        data(){
            return {
                flag : true,
                clientHeight : window.innerHeight,
                reloadFlag : true,
                throttle : undefined
            }
        },
        components : {
//            loading
        },
        provide(){
            return {
                reload : this.reload
            }
        },
        methods : {
            reload(){
                this.reloadFlag = false
                this.$nextTick(() => {
                    this.reloadFlag = true
                })
            }
        },
        beforeDestroy(){
            window.removeEventListener('resize',this.throttle)
            this.$store.getters.getParticleGround.pause()
        }
    }
</script>

<style lang="less">
    .entrance-container {
        background: #f1f1f1;
        height: 100vh;
        width: 100vw;
        .particleGround {
            background-image: linear-gradient(135deg,#79f1a4, #0e6fc6);
            position: fixed;
            width: 100%;
            height: 100%;
        }
        .box {
            width: 100vw;
            min-height:706px;
            overflow: hidden;
            position:relative;
            .title{
                margin-top:70px;
                width: 100%;
                height: 60px;
                p{
                    font-family: 'Lobster';
                    font-size:50px;
                    line-height:60px;
                    text-align: center;
                    margin-bottom:0;
                }
            }
            .content{
                width:394px;
                background: #fff;
                position:absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                box-shadow: 0 0 8px rgba(0,0,0,.1);
                padding: 50px;
                .sign{
                    width:100%;
                    font-weight:700;
                    font-size:18px;
                    text-align: center;
                    margin-bottom:40px;
                    a{
                        color:#969696;
                        display: inline-block;
                        width: 56px;
                        height: 40px;
                        line-height:40px;
                    }
                    a:hover{
                        border-bottom:2px solid #ea6f5a;
                    }
                    a.router-link-active{
                        color:#ea6f5a;
                        border-bottom:2px solid #ea6f5a;
                    }
                    span{
                        margin: 0 14px;
                    }
                }
                input{
                    border: 1px solid #c8c8c8;
                    border-top: 0;
                    width: 100%;;
                    height: 50px;
                    box-sizing: border-box;
                    padding: 4px 12px 4px 35px;
                    border-radius: 0;
                    background-color: hsla(0,0%,71%,.1);
                }
                button{
                    margin-top: 20px;
                    width: 100%;
                    padding: 9px 18px;
                    font-size: 18px;
                    border-radius: 25px;
                    color: #fff;
                    display: block;
                }
            }
        }
    }
    .form-tooltip-enter,.form-tooltip-leave-to{
        opacity: 0;
    }
    .form-tooltip-enter-active,.form-tooltip-leave-active{
        transition: all 0.4s ease;
    }
    div.mint-toast.is-placemiddle{
        .mint-toast-icon{
            font-size:50px;
        }
    }
</style>
